<template>
  <div class="footer">
    <ul class="iconList">
      <li class="icon01"></li>
      <li class="icon02"></li>
      <li class="icon03"></li>
      <li class="icon04"></li>
      <li class="icon05"></li>
      <li class="icon06"></li>
      <li class="icon07"></li>
    </ul>
    <div class="footerList">
      <dl>
        <dt>服务保障</dt>
        <dd>正品保证</dd>
        <dd>7天无理由放心退</dd>
        <dd>7x15小时客户服务</dd>
        <dd>7天无理由随心换</dd>
      </dl>
      <dl>
        <dt>服务保障</dt>
        <dd>购物指南</dd>
        <dd>导购演示</dd>
        <dd>订单操作</dd>
        <dd>会员注册</dd>
        <dd>账户管理</dd>
        <dd>收货样品</dd>
        <dd>会员等级</dd>
      </dl>
      <dl>
        <dt>支付方式</dt>
        <dd>23家主流网银支付</dd>
        <dd>支付宝、银联等支付</dd>
        <dd>信用卡支付</dd>
        <dd>零钱支付</dd>
      </dl>
      <dl>
        <dt>配送方式</dt>
        <dd>配送范围及运费</dd>
        <dd>验货与签收</dd>
      </dl>
      <dl>
        <dt>售后服务</dt>
        <dd>退货政策</dd>
        <dd>退款方式和时效</dd>
        <dd>换货服务</dd>
      </dl>
      <dl>
        <dt>唯品会APP二维码</dt>
        <img
          src="//b.appsimg.com/2016/06/17/863/1466134037230.jpg"
          width="100"
          height="100"
          alt="唯品会二维码"
        />
        <dd>下载唯品会移动APP</dd>
      </dl>
    </div>
    <div class="footerInfoLink">
      <p>
        <span>关于我们</span>
        <span>媒体报道</span>
        <span>品牌招商</span>
        <span>平台规则</span>
        <span>隐私条款</span>
        <span>唯品诚聘</span>
        <span>唯品卡</span>
        <span>联系我们</span>
        <span>廉正举报</span>
      </p>
    </div>
    <p class="footerInfoText">
      Copyright © 2008-现在 vip.com，All Rights Reserved 使用本网站即表示接受
      唯品会用户协议。版权所有 广州唯品会电子商务有限公司
      <br />
      粤公网安备 44010302111111号 粤ICP备08114786号 增值业务经营许可证：粤B2-20170777
      网络文化经营许可证：粤网文〔2021〕2056-282号
      <br />
      经营主体证照 风险监测信息 互联网药品信息服务资格证书：（粤）-经营性-2018-0271
      网络食品交易第三方平台备案凭证：粤B2-20170777 医疗器械网络交易服务第三方平台备案
      <br />
      凭证：（粤）网械平台备字[2019]第00001号
      出版物网络交易平台服务经营备案证：粤新出网备（2021）1号 未成年人关怀专区
      <br />
      违法和不良信息举报电话：4006789888 算法推荐违规举报电话：4006789888
    </p>
    <div class="footerWeb">
      <ul class="webList">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Bottom',
}
</script>

<style lang="less" scoped>
.footer {
  width: 80%;
  height: 514px;
  margin: 20px auto;

  .iconList {
    margin-left: 15%;
    overflow: hidden;
    li {
      margin-top: 30px;
      margin-right: 38px;
      margin-left: 10px;
      width: 72px;
      height: 75px;
      float: left;
    }
    .icon01 {
      background-position: 0 0;
      background: url(//shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png)
        no-repeat 0 0;
    }
    .icon02 {
      background-position: -123px 0;
      background-image: url(//shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png);
    }
    .icon03 {
      background-position: -245px 0;
      background-image: url(//shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png);
    }
    .icon04 {
      background-position: -369px 0;
      background-image: url(//shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png);
    }
    .icon05 {
      background-position: -492px 0;
      background-image: url(//shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png);
    }
    .icon06 {
      background-position: -615px 0;
      background-image: url(//shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png);
    }
    .icon07 {
      background-position: -723px 0;
      background-image: url(//shop.vipstatic.com/img/common/footer_common_20200705-hash-2a8e96cf.png);
    }
  }
  .footerList {
    margin-left: 11%;
    overflow: hidden;
    margin-top: 50px;

    dl {
      float: left;
      width: 145px;
      height: 146px;
      padding-left: 16px;
      border-right: 1px solid #e0e0e0;
      &:last-child {
        border: none;
      }
      dd {
        color: gray;
        cursor: pointer;
        &:hover {
          color: #f10180;
        }
      }
    }
  }
  .footerInfoLink {
    width: 960px;
    height: 30px;
    background-color: #d7237e;
    line-height: 30px;
    margin: 0px auto;
    p {
      text-align: center;
      display: block;
      margin: 0 auto;
      span {
        &:last-child {
          border: none;
        }
        padding: 0px 10px;
        color: white;
        border-right: 1px solid white;
      }
    }
  }
  .footerInfoText {
    margin-top: 20px;
    color: gray;
    text-align: center;
  }
  .footerWeb {
    width: 960px;
    height: 40px;
    margin: 0 auto;
    position: absolute;
    ul {
      margin-top: 20px;
      margin-left: 43%;
      overflow: hidden;
      li {
        float: left;
        width: 99px;
        height: 40px;
        margin-right: 9px;
        background-image: url(//shop.vipstatic.com/img/common/footer-hash-3de6f1ae.png?939748fb);
        background-repeat: no-repeat;
        &:first-child {
          background-position: 0 -150px;
        }
        &:nth-child(2) {
          background-position: 0px -203px;
        }
        &:nth-child(3) {
          background-position: 0px -251px;
        }
        &:nth-child(4) {
          background-position: 0px -400px;
        }
      }
    }
  }
}
</style>
